<template>
    <!-- 总容器 -->
    <div class="wrapper">

        <!-- header部分-->
        <header>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-1">
                            <img :src="user.userImg">
                        </div>
                        <div class="col-6">
                            <div class="username">{{user.userName}}</div>
                        </div>
                        <div class="col-3">
                            <button @click="unLogin" type="button" class="btn btn-secondary">退出登录</button>
                        </div>
                    </div>

                </div>
            </div>

        </header>

        <!-- 财务部分 -->
        <ul class="finance">
            <li onclick="location.href='#'">
                <img src="../assets/img/钱包.svg">
                <p>我的资产</p>
            </li>
            <li onclick="location.href='#'">
                <img src="../assets/img/红包.webp">
                <p>红包</p>
            </li>
            <li onclick="location.href='#'">
                <img src="../assets/img/券包.webp">
                <p>券包</p>
            </li>

        </ul>
        <!-- 功能设置部分 -->
        <ul class="options">
            <li onclick="location.href='#'">
                <img src="../assets/img/定位.svg">
                <p>我的地址</p>
            </li>
            <li onclick="location.href='#'">
                <img src="../assets/img/客服.svg">
                <p>我的客服</p>
            </li>
            <li onclick="location.href='#'">
                <img src="../assets/img/关于软件.svg">
                <p>关于饿了么</p>
            </li>
            <li onclick="location.href='#'">
                <img src="../assets/img/安全.svg">
                <p>用户隐私</p>
            </li>
            <li onclick="location.href='#'">
                <img src="../assets/img/规则说明.svg">
                <p>规则中心</p>
            </li>
        </ul>

        <Footer />

    </div>

</template>

<script>
import Footer from '../components/Footer.vue';

export default {
    name: "User",

    created() {
        this.user = this.$getSessionStorage('user');
        if (this.user == null)
            console.log("no user");
    },

    data() {
        return {
            user: {},
        }
    },

    methods: {
        unLogin() {
            this.$router.push({ path: '/login' });
            this.$removeSessionStorage('user');
        },

    },
    components: {
        Footer,
    },

}

</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
}

.wrapper::-webkit-scrollbar {
    width: 0 !important;
}

/****************** header部分 ******************/
.wrapper header {
    width: 92%;
    height: 12.5vw;
    margin: 50px;
    font-size: 63.68px;
}

.wrapper button {
    font-size: 50px;

}

/* .wrapper header .card-body {
    border-radius: 30%;
} */

.wrapper header .username {
    font-size: 5vw;
    height: 8vw;
    font-weight: bold;
}

.wrapper header img {
    height: 8vw;
    margin-bottom: 0;
    border-radius: 50%;
}


/****************** 财务部分 ******************/
.wrapper .finance {
    width: 92vw;
    height: 25vw;
    background-color: rgb(245, 245, 245);
    margin: 4vw;
    /* margin-top: 4vw;
    margin-bottom: 4vw;
    margin-left: 4vw;
    margin-right: 4vw; */
    padding: 0;
    border-radius: 3%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
    align-content: center;
}

.wrapper .finance li {
    /*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
    width: 18vw;
    height: 20vw;

    display: flex;
    /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
    flex-direction: column;
    justify-content: center;
    align-items: center;


    user-select: none;

    cursor: pointer;
}

.wrapper .finance li img {
    width: 8vw;
    /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
}

.wrapper .finance li p {
    font-size: 3vw;
    color: #666;
}

/****************** 选项功能部分 ******************/
.wrapper .options {
    width: 92vw;
    height: 25vw;
    background-color: rgb(245, 245, 245);
    margin: 4vw;
    /* margin-top: 4vw;
    margin-left: 4vw;
    margin-right: 4vw; */
    padding: 0;
    border-radius: 3%;


    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
    align-content: center;
}

.wrapper .options li {
    /*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
    width: 18vw;
    height: 20vw;

    display: flex;
    /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
    flex-direction: column;
    justify-content: center;
    align-items: center;


    user-select: none;

    cursor: pointer;
}

.wrapper .options li img {
    width: 6vw;
    /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
}

.wrapper .options li p {
    font-size: 3vw;
    color: #666;
}
</style>